<template>
	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 条件搜索 -->
			<cl-search ref="Search" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">
				<template #slot-setting="{ scope }">
					<el-button type="primary" @click="settingNursing(scope.row)"
						>设置护工</el-button
					>
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />

		<cl-form ref="FormRef"></cl-form>
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'order-order'
});

import { useCrud, useTable, useUpsert, useSearch } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';
import { onMounted, reactive, ref } from 'vue';
import UserSelect from '/$/user/components/user-select.vue';

import { useForm } from '@cool-vue/crud';

const FormRef = useForm();

const { service } = useCool();
const { t } = useI18n();

// 选项
const options = reactive({
	status: [
		{ label: t('待支付'), value: 0 },
		{ label: t('已支付'), value: 1 },
		{ label: t('已完成'), value: 2 },
		{ label: t('已取消'), value: 3 },
		{ label: t('已退款'), value: 4 }
	],
	payType: [
		{ label: t('微信'), value: 0 },
		{ label: t('支付宝'), value: 1 },
		{ label: t('银行卡'), value: 2 }
	]
});

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: t('订单号'),
			prop: 'orderNum',
			component: { name: 'el-input', props: { clearable: true } },
			span: 12,
			required: true
		},
		{
			label: t('总金额'),
			prop: 'totalPrice',
			hook: 'number',
			component: { name: 'el-input-number', props: { min: 0 } },
			span: 12,
			required: true
		},
		{
			label: t('状态'),
			prop: 'status',
			component: {
				name: 'cl-select',
				props: { options: options.status }
			},
			value: 0,
			span: 12,
			required: true
		},
		{
			label: t('备注'),
			prop: 'remark',
			component: {
				name: 'el-input',
				props: { type: 'textarea', rows: 4 }
			}
		}
	]
});

// cl-table
const Table = useTable({
	columns: [
		{ type: 'selection' },
		{ type: 'index', label: '序号', width: 60 },
		{ label: t('订单号'), prop: 'orderNum', minWidth: 140 },
		{
			label: t('总金额'),
			prop: 'totalPrice',
			minWidth: 140,
			sortable: 'custom'
		},
		{
			label: t('状态'),
			prop: 'status',
			minWidth: 120,
			dict: options.status
		},
		{ label: t('被护理人'), prop: 'beNurseName', minWidth: 140 },
		{
			label: t('省'),
			prop: 'province',
			showOverflowTooltip: true,
			width: 100
		},
		{
			label: t('市'),
			prop: 'city',
			showOverflowTooltip: true,
			width: 100
		},
		{
			label: t('区'),
			prop: 'district',
			showOverflowTooltip: true,
			width: 100
		},
		{
			label: t('被护理人地址'),
			prop: 'detailAddress',
			showOverflowTooltip: true,
			minWidth: 200
		},
		{
			label: t('下单用户'),
			prop: 'nickName',
			showOverflowTooltip: true,
			minWidth: 200
		},
		{
			label: t('联系电话'),
			prop: 'phone',
			showOverflowTooltip: true,
			minWidth: 200
		},
		{
			label: t('护工'),
			prop: 'nurseName',
			showOverflowTooltip: true,
			minWidth: 200
		},
		{
			label: t('开始时间'),
			prop: 'startTime',
			showOverflowTooltip: true,
			minWidth: 200,
			component: { name: 'cl-date-text', props: { format: 'YYYY-MM-DD' } }
		},
		{
			label: t('备注'),
			prop: 'remark',
			showOverflowTooltip: true,
			minWidth: 200
		},
		{
			label: t('创建时间'),
			prop: 'createTime',
			minWidth: 170,
			sortable: 'desc',
			component: { name: 'cl-date-text' }
		},
		{ type: 'op', width: 360, buttons: ['info', 'edit', 'delete', 'slot-setting'] }
	]
});

let isVisible = ref(false);
let listNursingData = ref([]);

const settingNursing = async row => {
	console.log(row, 'row');
	let listNursing = await service.nurse.info.list({ status: 0,nurseId:row.nurseId });
	listNursingData.value = listNursing.map(o => {
		return {
			value: o.id + '',
			label: o.name
		};
	});
	FormRef.value?.open({
		title: '设置护工',
		items: [
			{
				label: '护工',
				prop: 'nurseId',
				value: row.nurseId,
				required: true,
				component: {
					name: 'el-select',
					options: listNursingData
				}
			},
			{
				label: '开始时间',
				prop: 'startTime',
				value: row.startTime,
				required: true,
				minWidth: 170,
				component: { name: 'el-date-picker', props: { 'value-format': 'YYYY-MM-DD' } }
			}
		],
		on: {
			async submit(data, { close, done }) {
				console.log(data, '1112');
				let params = {
					id: row.id,
					nurseId: data.nurseId,
					startTime: data.startTime
				};
				await service.order.order.updateOrderNursing(params);
				Crud.value?.refresh();
				close();
				// let dasta = await
				// setTimeout(() => {
				// 	close();
				// }, 1500);
			}
		}
	});
};

console.log(service.nursing.person.list(), 'qqqq');
onMounted(async () => {});

// cl-search
const Search = useSearch();

// cl-crud
const Crud = useCrud(
	{
		service: service.order.order
	},
	app => {
		app.refresh();
	}
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}
</script>
